<!-- 首页的文章内容页 -->
<template>
    <div class="wrapper">
        <div class="head">
            <div class="l-btn" onclick="window.history.go(-1)"></div>
            <div class="header clear">资讯详情</div>
            <div class="zero"></div>
        </div>
        <div class="contents">
            <div class="cont">
                <h3>{{articleData.title}}</h3>
                <div class="time">
                    <p>
                        {{articleData.time | normalTime}}
                        <!-- <span><img src="../../assets/images/zan.png" alt=""/></span> -->
                    </p>
                </div>
                <div class="text-box" v-html="articleData.content"></div>
            </div>
        </div>
        <div class="left"><div>阅读200</div><div @click="fn()" class="box">
<img src="../../assets/images/dianzanhou.png" alt="" class="img2" style="display:none"/><img src="../../assets/images/dianzan.png" alt="" class="img1" />{{nums}}</div></div>
    </div>
</template>

<script>
export default{
    data(){
        return {
            articleData:[],
            nums:0
        }
    },
    mounted(){
        var reg = /\/article\/(\d+)/;
        var id = this.$route.path.match(reg)[1]; 
        //获取数据
        this.fetchData(id);
    },
    methods:{
        fetchData(id){
            var _this=this;
            this.$http.get('src/data/article.data').then(function(res){
                //console.log(res.data[id]);
                _this.articleData=res.data[id-1];
            }).catch(function(err){
                console.log('文章详细页面:',err);
            })
        },
        fn(){
            var _this=this;
            _this.nums++
            console.log(1)
            $(".img1").css("display","none")
            $(".img2").css("display","block")
        }
    }
}

</script>
<style scoped>
    .head{
        width:100%;
        height: .7rem;
        position:fixed; 
        top:0; 
        left:0;
        display:flex;
        justify-content:space-between;
        align-items: center;
        background:rgb(59, 62, 223); 
        border-bottom:1px solid #e8eaec; 
        z-index:99;}
    .l-btn{
        width:30%;
        height:1rem; 
        background:url(../../assets/images/history.png) no-repeat 0 0;
        margin-top: 0.5rem; 
        background-size:0.6rem;
        }
    .header{
        width: 30%;
        font-size: .4rem;
        color:#f2f4f5;
    }
    .zero{
        width: 30%;
    }
    .contents{
        max-width:6.4rem; 
        margin:0 auto; 
        background:#f2f4f5; 
        padding-bottom:0.85rem;
        }
    .contents .header{ 
        padding:0.39rem 0.28rem 0.15rem 0.28rem; 
        height:auto; 
        }
    .header h2{ 
        float:left;
        margin-right:0.18rem;
        width: 1.02rem; 
        height: 1.02rem;
        border-radius: 50%;
        }
    .header h2 img{
        max-width:100%;
        max-height:100%;
        }
    .header p{ 
        float:left; 
        margin-top:0.18rem; 
        font-size:0.3rem;
        }

    .contents .cont{ 
        padding:0 0.38rem; 
        color:#494d4d;
        }
    .cont h3{ 
        font-size:0.4rem; 
        line-height:0.6rem;
        margin-top:0.2rem;
        padding-bottom:0.25rem; 
        border-bottom:1px solid #494d4d;
        }
    .cont .time{
        height:0.24rem; 
        line-height:0.24rem; 
        margin:0.26rem 0; 
        }
    .time p{ 
        float:left;
        position:relative;
        }
    .time span{
        width:0.33rem;
        height:0.32rem; 
        position:absolute; 
        top:-0.02rem;
        right:-0.35rem;
        }
    .time span img{
        width:100%;
        height:100%;
        }

    .cont .text-box{ 
        font-size:0.25rem;
        }
    .text-box p{ 
        line-height:0.45rem; 
        margin-bottom:0.1rem;
        }
    .left{
        margin-left:0.4rem;
        color:#c7c7c7;
        
        /* border:1px solid red; */
    }
    .left div{
      line-height:0.46rem;
      float:left;  
    }
    .left img{
        width:9%;
        height:9%;
        float:left;
        margin-left:0.3rem;
    }
</style>
